<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RainOS v1.0</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
            user-select: none;
        }
 
        body {
            overflow: hidden;
            height: 100vh;
            background: linear-gradient(135deg, #0a0e2a, #1a1f40);
            color: white;
            transition: background 0.5s ease;
        }
 
        /* Rain Background */
        .rain-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
 
        .rain-drop {
            position: absolute;
            width: 1px;
            height: 30px;
            background: linear-gradient(transparent, rgba(255, 255, 255, 0.6));
            animation: rain linear infinite;
        }
 
        @keyframes rain {
            0% {
                transform: translateY(-100vh);
            }
            100% {
                transform: translateY(100vh);
            }
        }
 
        /* Installer */
        .installer {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            z-index: 1000;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            transition: all 0.3s ease;
        }
 
        .installer-header {
            padding: 30px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
 
        .installer-header h1 {
            font-weight: 500;
            font-size: 24px;
            margin-bottom: 10px;
        }
 
        .installer-header p {
            font-size: 14px;
            opacity: 0.8;
        }
 
        .installer-content {
            padding: 20px;
        }
 
        .installer-btn {
            display: inline-block;
            padding: 10px 30px;
            border-radius: 8px;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 16px;
            font-weight: 500;
            margin-top: 10px;
        }
 
        .installer-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
 
        .installer-step {
            display: none;
            animation: fadeIn 0.3s ease;
        }
 
        .installer-step.active {
            display: block;
        }
 
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
 
        .installer-form-group {
            margin-bottom: 16px;
            text-align: left;
        }
 
        .installer-form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 500;
        }
 
        .installer-form-group input, 
        .installer-form-group select {
            width: 100%;
            padding: 10px 14px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            outline: none;
            font-size: 14px;
            transition: all 0.2s ease;
        }
 
        .installer-form-group input:focus, 
        .installer-form-group select:focus {
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.2);
        }
 
        .version-selector {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
 
        .version-option {
            padding: 15px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }
 
        .version-option:hover {
            background: rgba(255, 255, 255, 0.2);
        }
 
        .version-option.selected {
            background: linear-gradient(90deg, rgba(106,17,203,0.5), rgba(37,117,252,0.5));
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
 
        .version-option img {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
            transition: transform 0.2s ease;
        }
 
        .version-option:hover img {
            transform: scale(1.1);
        }
 
        .version-option h3 {
            font-size: 14px;
            margin-bottom: 5px;
            font-weight: 500;
        }
 
        .version-option p {
            font-size: 12px;
            opacity: 0.8;
        }
 
        .theme-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-top: 15px;
        }
 
        .theme-option {
            width: 80px;
            height: 60px;
            border-radius: 8px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            border: 2px solid transparent;
            transition: all 0.2s ease;
        }
 
        .theme-option:hover, .theme-option.selected {
            border-color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transform: translateY(-3px);
        }
 
        .theme-option .theme-preview {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }
 
        .theme-option .theme-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            font-size: 10px;
            padding: 3px;
            text-align: center;
        }
 
        /* Progress bar */
        .progress-container {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            margin: 20px 0;
            overflow: hidden;
        }
 
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 3px;
        }
 
        /* Lock screen */
        .lock-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0a0e2a, #1a1f40);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
 
        .lock-screen.active {
            opacity: 1;
            pointer-events: all;
        }
 
        .lock-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            margin-bottom: 20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
 
        .lock-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
 
        .lock-name {
            font-size: 24px;
            margin-bottom: 30px;
            font-weight: 500;
        }
 
        .lock-input {
            padding: 12px 20px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            outline: none;
            width: 300px;
            max-width: 80%;
            text-align: center;
            font-size: 16px;
            transition: all 0.2s ease;
        }
 
        .lock-input:focus {
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.2);
        }
 
        .lock-hint {
            margin-top: 15px;
            font-size: 14px;
            opacity: 0.7;
        }
 
        /* Desktop */
        .desktop {
            position: relative;
            width: 100%;
            height: calc(100vh - 50px);
            overflow: hidden;
            display: none;
            transition: all 0.3s ease;
        }
 
        /* Desktop Icons */
        .desktop-icons {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 25px;
            gap: 25px;
        }
 
        .desktop-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 84px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }
 
        .desktop-icon:hover {
            transform: scale(1.05);
        }
 
        .desktop-icon .icon-container {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
        }
 
        .desktop-icon:hover .icon-container {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
        }
 
        .desktop-icon img {
            width: 32px;
            height: 32px;
            object-fit: contain;
            transition: transform 0.2s ease;
        }
 
        .desktop-icon:hover img {
            transform: scale(1.1);
        }
 
        .desktop-icon span {
            font-size: 12px;
            color: white;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            word-break: break-word;
            width: 100%;
            font-weight: 500;
        }
 
        /* Taskbar */
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: auto;
            height: 48px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            padding: 0 12px;
            border-radius: 16px 16px 0 0;
            z-index: 100;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.08);
            display: none;
            transition: all 0.3s ease;
        }
 
        .start-btn {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-right: 8px;
        }
 
        .start-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
 
        .start-btn img {
            width: 20px;
            height: 20px;
            transition: transform 0.2s ease;
        }
 
        .start-btn:hover img {
            transform: scale(1.1);
        }
 
        .taskbar-icons {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 100%;
        }
 
        .taskbar-icon {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .taskbar-icon img {
            width: 20px;
            height: 20px;
            transition: transform 0.2s ease;
        }
 
        .taskbar-icon:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.1);
        }
 
        .taskbar-icon:hover img {
            transform: scale(1.1);
        }
 
        .taskbar-icon.active {
            background: rgba(255, 255, 255, 0.15);
            position: relative;
        }
 
        .taskbar-icon.active::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 3px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 2px;
        }
 
        .taskbar-time {
            margin-left: auto;
            padding: 0 14px;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .taskbar-time:hover {
            background: rgba(255, 255, 255, 0.1);
        }
 
        /* Start Menu */
        .start-menu {
            position: fixed;
            bottom: 58px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            width: 380px;
            height: 480px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.1, 1);
            display: flex;
            flex-direction: column;
            z-index: 99;
            border: 1px solid rgba(255, 255, 255, 0.08);
            display: none;
        }
 
        .start-menu.active {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: all;
        }
 
        .start-menu-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
 
        .start-menu-header input {
            flex: 1;
            padding: 8px 16px;
            border-radius: 20px;
            border: none;
            background: rgba(255, 255, 255, 0.15);
            color: white;
            outline: none;
            font-size: 14px;
            transition: all 0.2s ease;
        }
 
        .start-menu-header input:focus {
            background: rgba(255, 255, 255, 0.2);
        }
 
        .start-menu-header input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
 
        .start-menu-apps {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            overflow-y: auto;
            padding-right: 8px;
        }
 
        .start-menu-app {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 8px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .start-menu-app:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-3px);
        }
 
        .start-menu-app .icon-container {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            transition: all 0.2s ease;
        }
 
        .start-menu-app:hover .icon-container {
            background: rgba(255, 255, 255, 0.2);
        }
 
        .start-menu-app img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            transition: transform 0.2s ease;
        }
 
        .start-menu-app:hover img {
            transform: scale(1.1);
        }
 
        .start-menu-app span {
            font-size: 12px;
            text-align: center;
            font-weight: 500;
        }
 
        .start-menu-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
 
        .user-profile {
            display: flex;
            align-items: center;
            gap: 8px;
        }
 
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
 
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
 
        .user-name {
            font-size: 13px;
            font-weight: 500;
        }
 
        .power-options {
            display: flex;
            gap: 8px;
        }
 
        .power-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .power-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
 
        .power-btn img {
            width: 16px;
            height: 16px;
            transition: transform 0.2s ease;
        }
 
        .power-btn:hover img {
            transform: scale(1.1);
        }
 
        /* Window Styling */
        .window {
            position: absolute;
            min-width: 320px;
            min-height: 240px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: none;
            z-index: 10;
            border: 1px solid rgba(255, 255, 255, 0.08);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }
 
        .window.active {
            display: flex;
            flex-direction: column;
            animation: windowOpen 0.3s ease;
        }
 
        @keyframes windowOpen {
            from { opacity: 0; transform: translate(-50%, -40%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
 
        .window.maximized {
            width: calc(100% - 20px) !important;
            height: calc(100% - 70px) !important;
            top: 10px !important;
            left: 10px !important;
            transform: none !important;
            border-radius: 0;
            animation: maximizeWindow 0.3s ease;
        }
 
        @keyframes maximizeWindow {
            from { 
                width: var(--prev-width);
                height: var(--prev-height);
                top: var(--prev-top);
                left: var(--prev-left);
                transform: none;
            }
        }
 
        .window.minimized {
            display: none;
            animation: minimizeWindow 0.3s ease;
        }
 
        @keyframes minimizeWindow {
            to { opacity: 0; transform: translate(-50%, 100%); }
        }
 
        .window-header {
            height: 42px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            background: rgba(255, 255, 255, 0.1);
            cursor: move;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
 
        .window-title {
            flex: 1;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
 
        .window-controls {
            display: flex;
            gap: 8px;
        }
 
        .window-btn {
            width: 20px;
            height: 20px;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .window-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
 
        .window-btn img {
            width: 10px;
            height: 10px;
            opacity: 0.8;
            transition: transform 0.2s ease;
        }
 
        .window-btn:hover img {
            transform: scale(1.1);
        }
 
        .window-btn.close:hover {
            background: #ff5f57;
        }
 
        .window-btn.minimize:hover {
            background: #ffbc2e;
        }
 
        .window-btn.maximize:hover {
            background: #28c840;
        }
 
        .window-content {
            flex: 1;
            padding: 16px;
            overflow: auto;
        }
 
        /* This PC Window */
        .pc-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
 
        .pc-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .pc-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }
 
        .pc-item .icon-container {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
        }
 
        .pc-item img {
            width: 20px;
            height: 20px;
        }
 
        .pc-item span {
            font-size: 14px;
            font-weight: 500;
        }
 
        /* File Explorer */
        .file-explorer {
            display: flex;
            height: 100%;
        }
 
        .sidebar {
            width: 180px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px;
            overflow-y: auto;
        }
 
        .sidebar-item {
            padding: 8px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 13px;
            display: flex;
            align-items: center;
        }
 
        .sidebar-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(3px);
        }
 
        .sidebar-item.active {
            background: rgba(255, 255, 255, 0.15);
        }
 
        .sidebar-item img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            transition: transform 0.2s ease;
        }
 
        .sidebar-item:hover img {
            transform: scale(1.1);
        }
 
        .file-content {
            flex: 1;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 12px;
            align-content: start;
        }
 
        .file-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .file-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
        }
 
        .file-item .icon-container {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            transition: all 0.2s ease;
        }
 
        .file-item:hover .icon-container {
            background: rgba(255, 255, 255, 0.2);
        }
 
        .file-item img {
            width: 24px;
            height: 24px;
            transition: transform 0.2s ease;
        }
 
        .file-item:hover img {
            transform: scale(1.1);
        }
 
        .file-name {
            font-size: 12px;
            text-align: center;
            word-break: break-word;
            width: 100%;
        }
 
        /* Calculator */
        .calculator {
            width: 300px;
            height: 450px;
        }
 
        .calculator-display {
            height: 80px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            margin-bottom: 16px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-end;
        }
 
        .calculator-history {
            font-size: 12px;
            opacity: 0.7;
            height: 16px;
            overflow: hidden;
        }
 
        .calculator-current {
            font-size: 28px;
            font-weight: 500;
        }
 
        .calculator-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
 
        .calculator-btn {
            height: 50px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
            background: rgba(255, 255, 255, 0.1);
            font-weight: 500;
        }
 
        .calculator-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }
 
        .calculator-btn.span-2 {
            grid-column: span 2;
        }
 
        .calculator-btn.operator {
            background: rgba(106, 17, 203, 0.3);
        }
 
        .calculator-btn.operator:hover {
            background: rgba(106, 17, 203, 0.4);
        }
 
        .calculator-btn.equals {
            background: linear-gradient(90deg, #6a11cb, #2575fc);
        }
 
        .calculator-btn.equals:hover {
            opacity: 0.9;
        }
 
        /* Browser Window */
        .browser {
            width: 800px;
            height: 600px;
        }
 
        .browser-url-bar {
            display: flex;
            margin-bottom: 10px;
        }
 
        .browser-url-input {
            flex: 1;
            padding: 8px 12px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            outline: none;
            transition: all 0.2s ease;
        }
 
        .browser-url-input:focus {
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.2);
        }
 
        .browser-go-btn {
            margin-left: 8px;
            padding: 8px 16px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }
 
        .browser-go-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }
 
        .browser-iframe {
            width: 100%;
            height: calc(100% - 50px);
            border: none;
            border-radius: 8px;
            background: white;
        }
 
        /* Game Window */
        .game-window {
            width: 800px;
            height: 600px;
        }
        
        .game-container {
            width: 100%;
            height: 100%;
            border: none;
            background: black;
        }
        
        .device-selector {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: center;
        }
        
        .device-btn {
            padding: 5px 15px;
            border-radius: 20px;
            background: rgba(255,255,255,0.1);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
        }
        
        .device-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.05);
        }
        
        .device-btn.active {
            background: linear-gradient(90deg, #6a11cb, #2575fc);
        }
 
        /* macOS Emulator Window */
        .emulator-window {
            width: 900px;
            height: 650px;
        }
 
        .emulator-container {
            width: 100%;
            height: 100%;
            border: none;
            background: black;
            border-radius: 0 0 8px 8px;
        }
 
        /* Different Version Styles */
        .daily-version {
            /* Default is daily version */
        }
 
        .work-version .window {
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            border-radius: 0;
            backdrop-filter: none;
        }
 
        .work-version .window-header {
            background: rgba(255, 255, 255, 0.9);
            color: #333;
        }
 
        .work-version .taskbar {
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            backdrop-filter: none;
        }
 
        .work-version .start-menu {
            background: rgba(255, 255, 255, 0.95);
            color: #333;
            backdrop-filter: none;
        }
 
        .work-version .desktop-icon span,
        .work-version .start-menu-app span {
            color: #333;
            text-shadow: none;
        }
 
        /* GNOME Specific Styles */
        .gnome-version .taskbar {
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            border-radius: 0;
            background: rgba(50, 50, 50, 0.9);
            transform: none;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 1000;
        }
        
        .gnome-version .start-btn {
            border-radius: 0;
            height: 40px;
            width: 40px;
            margin-right: 0;
        }
        
        .gnome-version .start-menu {
            top: 40px;
            left: 0;
            width: 300px;
            height: calc(100vh - 40px);
            border-radius: 0;
            transform: translateY(0);
            opacity: 1;
            pointer-events: all;
            display: none;
        }
        
        .gnome-version .start-menu.active {
            display: flex;
            animation: gnomeMenuOpen 0.3s ease;
        }
 
        @keyframes gnomeMenuOpen {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        
        .gnome-version .window {
            border-radius: 10px;
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            top: 50px !important;
        }
        
        .gnome-version .window.maximized {
            top: 40px !important;
        }
        
        .gnome-version .window-header {
            background: rgba(60, 60, 60, 0.8);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .gnome-version .file-item .icon-container,
        .gnome-version .sidebar-item {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .gnome-version .file-item:hover,
        .gnome-version .sidebar-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
 
        /* Ubuntu Specific Styles */
        .ubuntu-version .taskbar {
            left: 0;
            width: 70px;
            height: 100vh;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
            background: rgba(45, 45, 45, 0.9);
            transform: none;
            border-radius: 0;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 1000;
        }
        
        .ubuntu-version .taskbar-icons {
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        
        .ubuntu-version .taskbar-icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
        }
        
        .ubuntu-version .taskbar-icon img {
            width: 30px;
            height: 30px;
        }
        
        .ubuntu-version .taskbar-time {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            margin-left: 0;
            margin-top: auto;
            padding: 10px 0;
        }
        
        .ubuntu-version .start-menu {
            left: 70px;
            top: 0;
            height: 100vh;
            width: 350px;
            border-radius: 0 16px 16px 0;
            transform: translateY(0);
            opacity: 1;
            pointer-events: all;
            display: none;
        }
        
        .ubuntu-version .start-menu.active {
            display: flex;
            animation: ubuntuMenuOpen 0.3s ease;
        }
 
        @keyframes ubuntuMenuOpen {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        
        .ubuntu-version .window {
            border-radius: 4px;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: rgba(240, 240, 240, 0.95);
            color: #333;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .ubuntu-version .window-header {
            background: #3d3d3d;
            color: white;
        }
        
        .ubuntu-version .file-item .icon-container,
        .ubuntu-version .sidebar-item {
            background: rgba(0, 0, 0, 0.05);
        }
        
        .ubuntu-version .file-item:hover,
        .ubuntu-version .sidebar-item:hover {
            background: rgba(0, 0, 0, 0.1);
        }
        
        .ubuntu-version .file-name {
            color: #333;
        }
 
        /* Theme-specific styles */
        .dark-theme {
            background: linear-gradient(135deg, #0a0e2a, #1a1f40);
            color: white;
        }
 
        .light-theme {
            background: linear-gradient(135deg, #e0e5ec, #f0f2f5);
            color: #333;
        }
 
        .classic-theme {
            background: linear-gradient(135deg, #505050, #808080);
            color: white;
        }
 
        .classic-dark-theme {
            background: linear-gradient(135deg, #0a0a14, #14141e);
            color: white;
        }
 
        .dark-theme .window,
        .dark-theme .start-menu,
        .dark-theme .taskbar {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
 
        .light-theme .window,
        .light-theme .start-menu,
        .light-theme .taskbar {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: none;
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: #333;
        }
 
        .classic-theme .window,
        .classic-theme .start-menu,
        .classic-theme .taskbar {
            background: rgba(50, 50, 50, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
 
        .classic-dark-theme .window,
        .classic-dark-theme .start-menu,
        .classic-dark-theme .taskbar {
            background: rgba(10, 10, 20, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
 
        /* Language switch button */
        .language-switch {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 6px 12px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            font-size: 12px;
            z-index: 1001;
            transition: all 0.2s ease;
            display: none;
        }
 
        .language-switch:hover {
            background: rgba(255, 255, 255, 0.2);
        }
 
        .desktop.active ~ .language-switch {
            display: block;
        }
    </style>
</head>
<body class="dark-theme">
    <!-- Rain Background -->
    <div class="rain-background" id="rain-background"></div>
 
    <!-- Language Switch Button -->
    <button class="language-switch" id="language-switch">EN/中文</button>
 
    <!-- Lock Screen -->
    <div class="lock-screen" id="lock-screen">
        <div class="lock-avatar">
            <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="User">
        </div>
        <div class="lock-name" id="lock-name">User</div>
        <input type="password" class="lock-input" placeholder="Enter password" id="lock-password">
        <div class="lock-hint" id="lock-hint">Click to unlock</div>
    </div>
 
    <!-- Installer -->
    <div class="installer active" id="installer">
        <div class="installer-header">
            <h1 id="installer-title">RainOS v1.7</h1>
            <p id="installer-subtitle">Enhanced operating system experience</p>
        </div>
        <div class="installer-content">
            <!-- Welcome Step -->
            <div class="installer-step active" id="step-welcome">
                <button class="installer-btn" id="start-install">Install Now</button>
            </div>
 
            <!-- User Step -->
            <div class="installer-step" id="step-user">
                <h3 id="user-step-title">Create Your Account</h3>
                <div class="installer-form-group">
                    <label for="username" id="username-label">Username</label>
                    <input type="text" id="username" placeholder="Enter your username">
                </div>
                <div class="installer-form-group">
                    <label for="password" id="password-label">Password</label>
                    <input type="password" id="password" placeholder="Enter your password">
                </div>
                <div class="installer-form-group">
                    <label for="confirm-password" id="confirm-password-label">Confirm Password</label>
                    <input type="password" id="confirm-password" placeholder="Confirm your password">
                </div>
                <button class="installer-btn" id="user-next">Next</button>
            </div>
 
            <!-- Version Step -->
            <div class="installer-step" id="step-version">
                <h3 id="version-step-title">Select Version</h3>
                <div class="version-selector">
                    <div class="version-option" data-version="daily">
                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png">
                        <h3>Daily Edition</h3>
                        <p>Beautiful UI with glass effects</p>
                    </div>
                    <div class="version-option" data-version="work">
                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png">
                        <h3>Work Edition</h3>
                        <p>Simple and productive</p>
                    </div>
                    <div class="version-option" data-version="gnome">
                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png">
                        <h3>GNOME Edition</h3>
                        <p>macOS-like experience</p>
                    </div>
                    <div class="version-option" data-version="ubuntu">
                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png">
                        <h3>Ubuntu Edition</h3>
                        <p>Familiar Linux workflow</p>
                    </div>
                </div>
                <button class="installer-btn" id="version-next">Next</button>
            </div>
 
            <!-- Theme Step -->
            <div class="installer-step" id="step-theme">
                <h3 id="theme-step-title">Choose Your Theme</h3>
                <div class="theme-selector">
                    <div class="theme-option selected" data-theme="dark">
                        <div class="theme-preview" style="background: linear-gradient(rgba(10,14,42,0.8), rgba(26,31,64,0.9)), url('https://images.unsplash.com/photo-1534796636912-3b95b3ab598d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') center/cover;"></div>
                        <div class="theme-label">Dark (Stars)</div>
                    </div>
                    <div class="theme-option" data-theme="light">
                        <div class="theme-preview" style="background: linear-gradient(rgba(255,255,255,0.8), rgba(240,240,240,0.9)), url('https://images.unsplash.com/photo-1515705576963-95cad62945b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') center/cover;"></div>
                        <div class="theme-label">Light (Snow)</div>
                    </div>
                    <div class="theme-option" data-theme="classic">
                        <div class="theme-preview" style="background: linear-gradient(rgba(50,50,50,0.8), rgba(80,80,80,0.9)), url('https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') center/cover;"></div>
                        <div class="theme-label">Classic (Rain)</div>
                    </div>
                    <div class="theme-option" data-theme="classic-dark">
                        <div class="theme-preview" style="background: linear-gradient(rgba(10,10,20,0.8), rgba(20,20,30,0.9)), url('https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') center/cover;"></div>
                        <div class="theme-label">Classic Dark</div>
                    </div>
                </div>
                <button class="installer-btn" id="theme-next">Next</button>
            </div>
 
            <!-- Language Step -->
            <div class="installer-step" id="step-language">
                <h3 id="language-step-title">Select Language</h3>
                <div class="installer-form-group">
                    <select id="language">
                        <option value="en">English</option>
                        <option value="zh">中文</option>
                        <option value="es">Español</option>
                        <option value="fr">Français</option>
                        <option value="de">Deutsch</option>
                        <option value="ja">日本語</option>
                    </select>
                </div>
                <button class="installer-btn" id="language-next">Next</button>
            </div>
 
            <!-- Final Step -->
            <div class="installer-step" id="step-final">
                <h3 id="final-step-title">Ready to Install</h3>
                <p id="final-step-text">Your RainOS is ready to be installed with the following settings:</p>
                <div style="background: rgba(255,255,255,0.1); padding: 16px; border-radius: 12px; margin: 16px 0; border: 1px solid rgba(255,255,255,0.08);">
                    <p style="margin-bottom: 8px;"><strong id="summary-username-label">Username:</strong> <span id="summary-username"></span></p>
                    <p style="margin-bottom: 8px;"><strong id="summary-version-label">Version:</strong> <span id="summary-version"></span></p>
                    <p style="margin-bottom: 8px;"><strong id="summary-theme-label">Theme:</strong> <span id="summary-theme"></span></p>
                    <p><strong id="summary-language-label">Language:</strong> <span id="summary-language"></span></p>
                </div>
                <div class="progress-container">
                    <div class="progress-bar" id="progress-bar"></div>
                </div>
                <button class="installer-btn primary" id="install-btn">Install</button>
            </div>
        </div>
    </div>
 
    <!-- Desktop -->
    <div class="desktop" id="desktop">
        <div class="desktop-icons">
            <div class="desktop-icon" data-app="pc">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png" alt="This PC">
                </div>
                <span id="desktop-pc">This PC</span>
            </div>
            <div class="desktop-icon" data-app="browser">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965293.png" alt="Browser">
                </div>
                <span id="desktop-browser">Browser</span>
            </div>
            <div class="desktop-icon" data-app="calculator">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965298.png" alt="Calculator">
                </div>
                <span id="desktop-calculator">Calculator</span>
            </div>
            <div class="desktop-icon" data-app="emulator">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965301.png" alt="Emulator">
                </div>
                <span id="desktop-emulator">Emulator</span>
            </div>
            <div class="desktop-icon" data-app="games">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965285.png" alt="Games">
                </div>
                <span id="desktop-games">Games</span>
            </div>
        </div>
 
        <!-- Windows -->
        <div class="window" id="pc-window">
            <div class="window-header">
                <div class="window-title" id="pc-window-title">This PC</div>
                <div class="window-controls">
                    <div class="window-btn minimize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106096.png" alt="Minimize">
                    </div>
                    <div class="window-btn maximize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106103.png" alt="Maximize">
                    </div>
                    <div class="window-btn close">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106106.png" alt="Close">
                    </div>
                </div>
            </div>
            <div class="window-content">
                <div class="file-explorer">
                    <div class="sidebar">
                        <div class="sidebar-item active">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png">
                            <span id="sidebar-pc">This PC</span>
                        </div>
                        <div class="sidebar-item">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965280.png">
                            <span id="sidebar-documents">Documents</span>
                        </div>
                        <div class="sidebar-item">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965281.png">
                            <span id="sidebar-pictures">Pictures</span>
                        </div>
                        <div class="sidebar-item">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965282.png">
                            <span id="sidebar-music">Music</span>
                        </div>
                        <div class="sidebar-item">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965283.png">
                            <span id="sidebar-videos">Videos</span>
                        </div>
                        <div class="sidebar-item">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965279.png">
                            <span id="sidebar-disk">Local Disk (C:)</span>
                        </div>
                    </div>
                    <div class="file-content">
                        <div class="file-item" data-file="documents">
                            <div class="icon-container">
                                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965280.png">
                            </div>
                            <div class="file-name" id="file-documents">Documents</div>
                        </div>
                        <div class="file-item" data-file="pictures">
                            <div class="icon-container">
                                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965281.png">
                            </div>
                            <div class="file-name" id="file-pictures">Pictures</div>
                        </div>
                        <div class="file-item" data-file="music">
                            <div class="icon-container">
                                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965282.png">
                            </div>
                            <div class="file-name" id="file-music">Music</div>
                        </div>
                        <div class="file-item" data-file="videos">
                            <div class="icon-container">
                                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965283.png">
                            </div>
                            <div class="file-name" id="file-videos">Videos</div>
                        </div>
                        <div class="file-item" data-file="downloads">
                            <div class="icon-container">
                                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965284.png">
                            </div>
                            <div class="file-name" id="file-downloads">Downloads</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="window browser" id="browser-window">
            <div class="window-header">
                <div class="window-title" id="browser-window-title">Browser</div>
                <div class="window-controls">
                    <div class="window-btn minimize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106096.png" alt="Minimize">
                    </div>
                    <div class="window-btn maximize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106103.png" alt="Maximize">
                    </div>
                    <div class="window-btn close">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106106.png" alt="Close">
                    </div>
                </div>
            </div>
            <div class="window-content">
                <div class="browser-url-bar">
                    <input type="text" class="browser-url-input" value="https://www.google.com" id="browser-url">
                    <button class="browser-go-btn" id="browser-go">Go</button>
                </div>
                <iframe src="https://www.google.com" class="browser-iframe" id="browser-iframe"></iframe>
            </div>
        </div>
 
        <div class="window calculator" id="calculator-window">
            <div class="window-header">
                <div class="window-title" id="calculator-window-title">Calculator</div>
                <div class="window-controls">
                    <div class="window-btn minimize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106096.png" alt="Minimize">
                    </div>
                    <div class="window-btn maximize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106103.png" alt="Maximize">
                    </div>
                    <div class="window-btn close">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106106.png" alt="Close">
                    </div>
                </div>
            </div>
            <div class="window-content">
                <div class="calculator-display">
                    <div class="calculator-history" id="calculator-history"></div>
                    <div class="calculator-current" id="calculator-current">0</div>
                </div>
                <div class="calculator-buttons">
                    <div class="calculator-btn" data-value="C">C</div>
                    <div class="calculator-btn" data-value="+/-">+/-</div>
                    <div class="calculator-btn" data-value="%">%</div>
                    <div class="calculator-btn operator" data-value="/">÷</div>
                    
                    <div class="calculator-btn" data-value="7">7</div>
                    <div class="calculator-btn" data-value="8">8</div>
                    <div class="calculator-btn" data-value="9">9</div>
                    <div class="calculator-btn operator" data-value="*">×</div>
                    
                    <div class="calculator-btn" data-value="4">4</div>
                    <div class="calculator-btn" data-value="5">5</div>
                    <div class="calculator-btn" data-value="6">6</div>
                    <div class="calculator-btn operator" data-value="-">-</div>
                    
                    <div class="calculator-btn" data-value="1">1</div>
                    <div class="calculator-btn" data-value="2">2</div>
                    <div class="calculator-btn" data-value="3">3</div>
                    <div class="calculator-btn operator" data-value="+">+</div>
                    
                    <div class="calculator-btn span-2" data-value="0">0</div>
                    <div class="calculator-btn" data-value=".">.</div>
                    <div class="calculator-btn equals" data-value="=">=</div>
                </div>
            </div>
        </div>
 
        <div class="window emulator-window" id="emulator-window">
            <div class="window-header">
                <div class="window-title" id="emulator-window-title">macOS Emulator</div>
                <div class="window-controls">
                    <div class="window-btn minimize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106096.png" alt="Minimize">
                    </div>
                    <div class="window-btn maximize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106103.png" alt="Maximize">
                    </div>
                    <div class="window-btn close">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106106.png" alt="Close">
                    </div>
                </div>
            </div>
            <div class="window-content">
                <iframe src="https://chrisbinsunny.github.io/chrishub/" class="emulator-container"></iframe>
            </div>
        </div>
 
        <div class="window game-window" id="games-window">
            <div class="window-header">
                <div class="window-title" id="games-window-title">Games</div>
                <div class="window-controls">
                    <div class="window-btn minimize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106096.png" alt="Minimize">
                    </div>
                    <div class="window-btn maximize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106103.png" alt="Maximize">
                    </div>
                    <div class="window-btn close">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106106.png" alt="Close">
                    </div>
                </div>
            </div>
            <div class="window-content">
                <div class="file-explorer">
                    <div class="sidebar">
                        <div class="sidebar-item active">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965285.png">
                            <span id="sidebar-games">Games</span>
                        </div>
                        <div class="sidebar-item">
                            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png">
                            <span id="sidebar-installed">Installed</span>
                        </div>
                    </div>
                    <div class="file-content">
                        <div class="file-item" data-game="pvz">
                            <div class="icon-container">
                                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965285.png">
                            </div>
                            <div class="file-name" id="game-pvz">Plants vs Zombies</div>
                        </div>
                        <div class="file-item" data-game="minecraft">
                            <div class="icon-container">
                                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png">
                            </div>
                            <div class="file-name" id="game-minecraft">Minecraft</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="window game-window" id="pvz-window">
            <div class="window-header">
                <div class="window-title" id="pvz-window-title">Plants vs Zombies</div>
                <div class="window-controls">
                    <div class="window-btn minimize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106096.png" alt="Minimize">
                    </div>
                    <div class="window-btn maximize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106103.png" alt="Maximize">
                    </div>
                    <div class="window-btn close">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106106.png" alt="Close">
                    </div>
                </div>
            </div>
            <div class="window-content">
                <iframe src="https://shuntpvz.jiangnangame.com/play/index.html" class="game-container"></iframe>
            </div>
        </div>
 
        <div class="window game-window" id="minecraft-window">
            <div class="window-header">
                <div class="window-title" id="minecraft-window-title">Minecraft</div>
                <div class="window-controls">
                    <div class="window-btn minimize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106096.png" alt="Minimize">
                    </div>
                    <div class="window-btn maximize">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106103.png" alt="Maximize">
                    </div>
                    <div class="window-btn close">
                        <img src="https://cdn-icons-png.flaticon.com/512/2106/2106106.png" alt="Close">
                    </div>
                </div>
            </div>
            <div class="window-content">
                <iframe src="" class="game-container" id="minecraft-frame"></iframe>
                <div class="device-selector">
                    <button class="device-btn active" data-device="pc" id="device-pc">PC Version</button>
                    <button class="device-btn" data-device="mobile" id="device-mobile">Mobile Version</button>
                </div>
            </div>
        </div>
    </div>
 
    <!-- Taskbar -->
    <div class="taskbar" id="taskbar">
        <div class="start-btn" id="start-btn">
            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="Start">
        </div>
        <div class="taskbar-icons">
            <div class="taskbar-icon" data-app="pc">
                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png" alt="This PC">
            </div>
            <div class="taskbar-icon" data-app="browser">
                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965293.png" alt="Browser">
            </div>
            <div class="taskbar-icon" data-app="calculator">
                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965298.png" alt="Calculator">
            </div>
        </div>
        <div class="taskbar-time" id="taskbar-time">00:00</div>
    </div>
 
    <!-- Start Menu -->
    <div class="start-menu" id="start-menu">
        <div class="start-menu-header">
            <input type="text" placeholder="Search apps and settings" id="start-search">
        </div>
        <div class="start-menu-apps">
            <div class="start-menu-app" data-app="pc">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png" alt="This PC">
                </div>
                <span id="start-pc">This PC</span>
            </div>
            <div class="start-menu-app" data-app="browser">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965293.png" alt="Browser">
                </div>
                <span id="start-browser">Browser</span>
            </div>
            <div class="start-menu-app" data-app="calculator">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965298.png" alt="Calculator">
                </div>
                <span id="start-calculator">Calculator</span>
            </div>
            <div class="start-menu-app" data-app="emulator">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965301.png" alt="Emulator">
                </div>
                <span id="start-emulator">Emulator</span>
            </div>
            <div class="start-menu-app" data-app="games">
                <div class="icon-container">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965285.png" alt="Games">
                </div>
                <span id="start-games">Games</span>
            </div>
        </div>
        <div class="start-menu-footer">
            <div class="user-profile">
                <div class="user-avatar">
                    <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="User">
                </div>
                <div class="user-name" id="menu-username">User</div>
            </div>
            <div class="power-options">
                <div class="power-btn" id="lock-btn">
                    <img src="https://cdn-icons-png.flaticon.com/512/2106/2106109.png" alt="Lock">
                </div>
                <div class="power-btn" id="restart-btn">
                    <img src="https://cdn-icons-png.flaticon.com/512/2106/2106110.png" alt="Restart">
                </div>
                <div class="power-btn" id="shutdown-btn">
                    <img src="https://cdn-icons-png.flaticon.com/512/2106/2106111.png" alt="Shutdown">
                </div>
            </div>
        </div>
    </div>
 
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Elements
            const installer = document.getElementById('installer');
            const startInstallBtn = document.getElementById('start-install');
            const userNextBtn = document.getElementById('user-next');
            const versionNextBtn = document.getElementById('version-next');
            const themeNextBtn = document.getElementById('theme-next');
            const languageNextBtn = document.getElementById('language-next');
            const installBtn = document.getElementById('install-btn');
            const steps = document.querySelectorAll('.installer-step');
            const desktop = document.getElementById('desktop');
            const taskbar = document.getElementById('taskbar');
            const startMenu = document.getElementById('start-menu');
            const startBtn = document.getElementById('start-btn');
            const taskbarTime = document.getElementById('taskbar-time');
            const desktopIcons = document.querySelectorAll('.desktop-icon');
            const taskbarIcons = document.querySelectorAll('.taskbar-icon');
            const startMenuApps = document.querySelectorAll('.start-menu-app');
            const windows = document.querySelectorAll('.window');
            const windowControls = document.querySelectorAll('.window-btn');
            const rainBackground = document.getElementById('rain-background');
            const versionOptions = document.querySelectorAll('.version-option');
            const themeOptions = document.querySelectorAll('.theme-option');
            const gameItems = document.querySelectorAll('.file-item[data-game]');
            const minecraftFrame = document.getElementById('minecraft-frame');
            const deviceBtns = document.querySelectorAll('.device-btn');
            const calculatorBtns = document.querySelectorAll('.calculator-btn');
            const calculatorCurrent = document.getElementById('calculator-current');
            const calculatorHistory = document.getElementById('calculator-history');
            const browserUrlInput = document.getElementById('browser-url');
            const browserGoBtn = document.getElementById('browser-go');
            const browserIframe = document.getElementById('browser-iframe');
            const lockScreen = document.getElementById('lock-screen');
            const lockName = document.getElementById('lock-name');
            const lockPassword = document.getElementById('lock-password');
            const lockHint = document.getElementById('lock-hint');
            const lockBtn = document.getElementById('lock-btn');
            const restartBtn = document.getElementById('restart-btn');
            const shutdownBtn = document.getElementById('shutdown-btn');
            const progressBar = document.getElementById('progress-bar');
            const languageSwitch = document.getElementById('language-switch');
            
            // Language translations
            const translations = {
                en: {
                    installerTitle: "RainOS v1.7",
                    installerSubtitle: "Enhanced operating system experience",
                    startInstall: "Install Now",
                    userStepTitle: "Create Your Account",
                    usernameLabel: "Username",
                    passwordLabel: "Password",
                    confirmPasswordLabel: "Confirm Password",
                    next: "Next",
                    versionStepTitle: "Select Version",
                    themeStepTitle: "Choose Your Theme",
                    languageStepTitle: "Select Language",
                    finalStepTitle: "Ready to Install",
                    finalStepText: "Your RainOS is ready to be installed with the following settings:",
                    summaryUsername: "Username:",
                    summaryVersion: "Version:",
                    summaryTheme: "Theme:",
                    summaryLanguage: "Language:",
                    install: "Install",
                    desktopPc: "This PC",
                    desktopBrowser: "Browser",
                    desktopCalculator: "Calculator",
                    desktopEmulator: "Emulator",
                    desktopGames: "Games",
                    pcWindowTitle: "This PC",
                    sidebarPc: "This PC",
                    sidebarDocuments: "Documents",
                    sidebarPictures: "Pictures",
                    sidebarMusic: "Music",
                    sidebarVideos: "Videos",
                    sidebarDisk: "Local Disk (C:)",
                    fileDocuments: "Documents",
                    filePictures: "Pictures",
                    fileMusic: "Music",
                    fileVideos: "Videos",
                    fileDownloads: "Downloads",
                    browserWindowTitle: "Browser",
                    go: "Go",
                    calculatorWindowTitle: "Calculator",
                    emulatorWindowTitle: "macOS Emulator",
                    gamesWindowTitle: "Games",
                    sidebarGames: "Games",
                    sidebarInstalled: "Installed",
                    gamePvz: "Plants vs Zombies",
                    gameMinecraft: "Minecraft",
                    devicePc: "PC Version",
                    deviceMobile: "Mobile Version",
                    startSearch: "Search apps and settings",
                    startPc: "This PC",
                    startBrowser: "Browser",
                    startCalculator: "Calculator",
                    startEmulator: "Emulator",
                    startGames: "Games",
                    lockPlaceholder: "Enter password",
                    lockHint: "Click to unlock"
                },
                zh: {
                    installerTitle: "RainOS v1.7",
                    installerSubtitle: "增强的操作系统体验",
                    startInstall: "立即安装",
                    userStepTitle: "创建您的账户",
                    usernameLabel: "用户名",
                    passwordLabel: "密码",
                    confirmPasswordLabel: "确认密码",
                    next: "下一步",
                    versionStepTitle: "选择版本",
                    themeStepTitle: "选择主题",
                    languageStepTitle: "选择语言",
                    finalStepTitle: "准备安装",
                    finalStepText: "RainOS 已准备好安装，使用以下设置:",
                    summaryUsername: "用户名:",
                    summaryVersion: "版本:",
                    summaryTheme: "主题:",
                    summaryLanguage: "语言:",
                    install: "安装",
                    desktopPc: "此电脑",
                    desktopBrowser: "浏览器",
                    desktopCalculator: "计算器",
                    desktopEmulator: "模拟器",
                    desktopGames: "游戏",
                    pcWindowTitle: "此电脑",
                    sidebarPc: "此电脑",
                    sidebarDocuments: "文档",
                    sidebarPictures: "图片",
                    sidebarMusic: "音乐",
                    sidebarVideos: "视频",
                    sidebarDisk: "本地磁盘 (C:)",
                    fileDocuments: "文档",
                    filePictures: "图片",
                    fileMusic: "音乐",
                    fileVideos: "视频",
                    fileDownloads: "下载",
                    browserWindowTitle: "浏览器",
                    go: "前往",
                    calculatorWindowTitle: "计算器",
                    emulatorWindowTitle: "macOS 模拟器",
                    gamesWindowTitle: "游戏",
                    sidebarGames: "游戏",
                    sidebarInstalled: "已安装",
                    gamePvz: "植物大战僵尸",
                    gameMinecraft: "我的世界",
                    devicePc: "电脑版",
                    deviceMobile: "手机版",
                    startSearch: "搜索应用和设置",
                    startPc: "此电脑",
                    startBrowser: "浏览器",
                    startCalculator: "计算器",
                    startEmulator: "模拟器",
                    startGames: "游戏",
                    lockPlaceholder: "输入密码",
                    lockHint: "点击解锁"
                }
            };
            
            // Calculator variables
            let currentOperand = '0';
            let previousOperand = '';
            let operation = undefined;
            let resetScreen = false;
            
            // Variables
            let currentStep = 0;
            let username = '';
            let selectedVersion = 'daily';
            let selectedTheme = 'dark';
            let selectedLanguage = 'en';
            let isLocked = false;
            let userPassword = '';
            
            // Create rain effect
            function createRain() {
                const rainDrops = 100;
                
                for (let i = 0; i < rainDrops; i++) {
                    const rainDrop = document.createElement('div');
                    rainDrop.classList.add('rain-drop');
                    rainDrop.style.left = `${Math.random() * 100}vw`;
                    rainDrop.style.animationDuration = `${Math.random() * 0.5 + 0.5}s`;
                    rainDrop.style.animationDelay = `${Math.random() * 2}s`;
                    rainDrop.style.opacity = Math.random() * 0.5 + 0.3;
                    rainDrop.style.height = `${Math.random() * 20 + 20}px`;
                    rainBackground.appendChild(rainDrop);
                }
            }
            
            // Initialize
            createRain();
            updateTime();
            setInterval(updateTime, 1000);
            
            // Update translations
            function updateTranslations(lang) {
                const t = translations[lang];
                if (!t) return;
                
                // Installer
                document.getElementById('installer-title').textContent = t.installerTitle;
                document.getElementById('installer-subtitle').textContent = t.installerSubtitle;
                document.getElementById('start-install').textContent = t.startInstall;
                document.getElementById('user-step-title').textContent = t.userStepTitle;
                document.getElementById('username-label').textContent = t.usernameLabel;
                document.getElementById('password-label').textContent = t.passwordLabel;
                document.getElementById('confirm-password-label').textContent = t.confirmPasswordLabel;
                document.getElementById('version-step-title').textContent = t.versionStepTitle;
                document.getElementById('theme-step-title').textContent = t.themeStepTitle;
                document.getElementById('language-step-title').textContent = t.languageStepTitle;
                document.getElementById('final-step-title').textContent = t.finalStepTitle;
                document.getElementById('final-step-text').textContent = t.finalStepText;
                document.getElementById('summary-username-label').textContent = t.summaryUsername;
                document.getElementById('summary-version-label').textContent = t.summaryVersion;
                document.getElementById('summary-theme-label').textContent = t.summaryTheme;
                document.getElementById('summary-language-label').textContent = t.summaryLanguage;
                document.getElementById('install-btn').textContent = t.install;
                
                // Desktop
                document.getElementById('desktop-pc').textContent = t.desktopPc;
                document.getElementById('desktop-browser').textContent = t.desktopBrowser;
                document.getElementById('desktop-calculator').textContent = t.desktopCalculator;
                document.getElementById('desktop-emulator').textContent = t.desktopEmulator;
                document.getElementById('desktop-games').textContent = t.desktopGames;
                
                // PC Window
                document.getElementById('pc-window-title').textContent = t.pcWindowTitle;
                document.getElementById('sidebar-pc').textContent = t.sidebarPc;
                document.getElementById('sidebar-documents').textContent = t.sidebarDocuments;
                document.getElementById('sidebar-pictures').textContent = t.sidebarPictures;
                document.getElementById('sidebar-music').textContent = t.sidebarMusic;
                document.getElementById('sidebar-videos').textContent = t.sidebarVideos;
                document.getElementById('sidebar-disk').textContent = t.sidebarDisk;
                document.getElementById('file-documents').textContent = t.fileDocuments;
                document.getElementById('file-pictures').textContent = t.filePictures;
                document.getElementById('file-music').textContent = t.fileMusic;
                document.getElementById('file-videos').textContent = t.fileVideos;
                document.getElementById('file-downloads').textContent = t.fileDownloads;
                
                // Browser Window
                document.getElementById('browser-window-title').textContent = t.browserWindowTitle;
                document.getElementById('browser-go').textContent = t.go;
                
                // Calculator Window
                document.getElementById('calculator-window-title').textContent = t.calculatorWindowTitle;
                
                // Emulator Window
                document.getElementById('emulator-window-title').textContent = t.emulatorWindowTitle;
                
                // Games Window
                document.getElementById('games-window-title').textContent = t.gamesWindowTitle;
                document.getElementById('sidebar-games').textContent = t.sidebarGames;
                document.getElementById('sidebar-installed').textContent = t.sidebarInstalled;
                document.getElementById('game-pvz').textContent = t.gamePvz;
                document.getElementById('game-minecraft').textContent = t.gameMinecraft;
                document.getElementById('device-pc').textContent = t.devicePc;
                document.getElementById('device-mobile').textContent = t.deviceMobile;
                
                // Start Menu
                document.getElementById('start-search').placeholder = t.startSearch;
                document.getElementById('start-pc').textContent = t.startPc;
                document.getElementById('start-browser').textContent = t.startBrowser;
                document.getElementById('start-calculator').textContent = t.startCalculator;
                document.getElementById('start-emulator').textContent = t.startEmulator;
                document.getElementById('start-games').textContent = t.startGames;
                
                // Lock Screen
                document.getElementById('lock-password').placeholder = t.lockPlaceholder;
                document.getElementById('lock-hint').textContent = t.lockHint;
                
                // PvZ Window
                document.getElementById('pvz-window-title').textContent = t.gamePvz;
                
                // Minecraft Window
                document.getElementById('minecraft-window-title').textContent = t.gameMinecraft;
            }
            
            // Installer Steps
            function showStep(step) {
                steps.forEach((s, i) => {
                    s.classList.toggle('active', i === step);
                });
                currentStep = step;
            }
            
            // Update time
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                taskbarTime.textContent = `${hours}:${minutes}`;
            }
            
            // Open window
            function openWindow(app) {
                if (isLocked) return;
                
                windows.forEach(w => {
                    if (w.id === `${app}-window`) {
                        w.classList.add('active');
                        w.classList.remove('minimized');
                        w.style.zIndex = getHighestZIndex() + 1;
                        
                        // Center window if not maximized
                        if (!w.classList.contains('maximized')) {
                            w.style.left = '50%';
                            w.style.top = '50%';
                            w.style.transform = 'translate(-50%, -50%)';
                        } else {
                            w.style.width = 'calc(100% - 20px)';
                            w.style.height = 'calc(100% - 70px)';
                            w.style.top = '10px';
                            w.style.left = '10px';
                            w.style.transform = 'none';
                        }
                    }
                });
                
                // Update taskbar icons
                taskbarIcons.forEach(icon => {
                    if (icon.dataset.app === app) {
                        icon.classList.add('active');
                    } else {
                        icon.classList.remove('active');
                    }
                });
            }
            
            // Get highest z-index
            function getHighestZIndex() {
                const windows = document.querySelectorAll('.window');
                let highest = 10;
                
                windows.forEach(w => {
                    const zIndex = parseInt(w.style.zIndex || 0);
                    if (zIndex > highest) highest = zIndex;
                });
                
                return highest;
            }
            
            // Lock screen
            function lockSystem() {
                isLocked = true;
                lockScreen.classList.add('active');
                lockName.textContent = username;
                lockPassword.value = '';
                lockPassword.focus();
            }
            
            // Unlock screen
            function unlockSystem() {
                if (lockPassword.value === userPassword) {
                    isLocked = false;
                    lockScreen.classList.remove('active');
                } else {
                    lockHint.textContent = 'Incorrect password';
                    setTimeout(() => {
                        lockHint.textContent = translations[selectedLanguage].lockHint;
                    }, 2000);
                }
            }
            
            // Calculator functions
            function updateCalculatorDisplay() {
                calculatorCurrent.textContent = currentOperand;
                if (operation != null) {
                    calculatorHistory.textContent = `${previousOperand} ${operation}`;
                } else {
                    calculatorHistory.textContent = '';
                }
            }
            
            function appendNumber(number) {
                if (currentOperand === '0' || resetScreen) {
                    currentOperand = number;
                    resetScreen = false;
                } else {
                    currentOperand += number;
                }
            }
            
            function chooseOperation(op) {
                if (currentOperand === '') return;
                if (previousOperand !== '') {
                    compute();
                }
                operation = op;
                previousOperand = currentOperand;
                currentOperand = '';
                updateCalculatorDisplay();
            }
            
            function compute() {
                let computation;
                const prev = parseFloat(previousOperand);
                const current = parseFloat(currentOperand);
                if (isNaN(prev) || isNaN(current)) return;
                
                switch (operation) {
                    case '+':
                        computation = prev + current;
                        break;
                    case '-':
                        computation = prev - current;
                        break;
                    case '*':
                        computation = prev * current;
                        break;
                    case '/':
                        computation = prev / current;
                        break;
                    default:
                        return;
                }
                
                currentOperand = computation.toString();
                operation = undefined;
                previousOperand = '';
                resetScreen = true;
            }
            
            function clearCalculator() {
                currentOperand = '0';
                previousOperand = '';
                operation = undefined;
            }
            
            function deleteNumber() {
                currentOperand = currentOperand.toString().slice(0, -1);
                if (currentOperand === '') {
                    currentOperand = '0';
                }
            }
            
            function toggleSign() {
                currentOperand = (parseFloat(currentOperand) * -1).toString();
            }
            
            function addDecimalPoint() {
                if (resetScreen) {
                    currentOperand = '0';
                    resetScreen = false;
                }
                if (currentOperand.includes('.')) return;
                currentOperand += '.';
            }
            
            // Event listeners
            startInstallBtn.addEventListener('click', function() {
                showStep(1); // User step
            });
            
            userNextBtn.addEventListener('click', function() {
                username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const confirmPassword = document.getElementById('confirm-password').value;
                
                if (!username || !password) {
                    alert('Please enter both username and password');
                    return;
                }
                
                if (password !== confirmPassword) {
                    alert('Passwords do not match');
                    return;
                }
                
                userPassword = password;
                showStep(2); // Version step
            });
            
            versionNextBtn.addEventListener('click', function() {
                if (!selectedVersion) {
                    alert('Please select a version');
                    return;
                }
                
                showStep(3); // Theme step
            });
            
            themeNextBtn.addEventListener('click', function() {
                if (!selectedTheme) {
                    alert('Please select a theme');
                    return;
                }
                
                showStep(4); // Language step
            });
            
            languageNextBtn.addEventListener('click', function() {
                selectedLanguage = document.getElementById('language').value;
                
                // Update summary
                document.getElementById('summary-username').textContent = username;
                document.getElementById('summary-version').textContent = 
                    selectedVersion === 'daily' ? 'Daily Edition' :
                    selectedVersion === 'work' ? 'Work Edition' :
                    selectedVersion === 'gnome' ? 'GNOME Edition' : 'Ubuntu Edition';
                document.getElementById('summary-theme').textContent = 
                    selectedTheme === 'dark' ? 'Dark (Stars)' :
                    selectedTheme === 'light' ? 'Light (Snow)' :
                    selectedTheme === 'classic' ? 'Classic (Rain)' : 'Classic Dark';
                document.getElementById('summary-language').textContent = 
                    selectedLanguage === 'en' ? 'English' :
                    selectedLanguage === 'zh' ? '中文' :
                    selectedLanguage === 'es' ? 'Español' :
                    selectedLanguage === 'fr' ? 'Français' :
                    selectedLanguage === 'de' ? 'Deutsch' : '日本語';
                
                showStep(5); // Final step
            });
            
            installBtn.addEventListener('click', function() {
                // Simulate installation progress
                let progress = 0;
                const interval = setInterval(() => {
                    progress += Math.random() * 10;
                    if (progress > 100) progress = 100;
                    progressBar.style.width = `${progress}%`;
                    
                    if (progress === 100) {
                        clearInterval(interval);
                        
                        // Apply version and theme
                        document.body.className = `${selectedVersion}-version ${selectedTheme}-theme`;
                        
                        // Adjust rain color based on theme
                        if (selectedTheme === 'light') {
                            document.querySelectorAll('.rain-drop').forEach(drop => {
                                drop.style.background = 'linear-gradient(transparent, rgba(0, 0, 0, 0.4))';
                            });
                        } else {
                            document.querySelectorAll('.rain-drop').forEach(drop => {
                                drop.style.background = 'linear-gradient(transparent, rgba(255, 255, 255, 0.6))';
                            });
                        }
                        
                        // Update translations
                        updateTranslations(selectedLanguage);
                        
                        // Show lock screen first
                        setTimeout(() => {
                            installer.style.display = 'none';
                            lockSystem();
                            
                            // Then show desktop after unlock
                            setTimeout(() => {
                                desktop.style.display = 'block';
                                taskbar.style.display = 'flex';
                                startMenu.style.display = 'flex';
                                
                                // Set username
                                document.getElementById('menu-username').textContent = username;
                                
                                // Open calculator by default
                                openWindow('calculator');
                            }, 100);
                        }, 500);
                    }
                }, 200);
            });
            
            // Version selection
            versionOptions.forEach(option => {
                option.addEventListener('click', function() {
                    versionOptions.forEach(opt => opt.classList.remove('selected'));
                    this.classList.add('selected');
                    selectedVersion = this.dataset.version;
                });
            });
            
            // Theme selection
            themeOptions.forEach(option => {
                option.addEventListener('click', function() {
                    themeOptions.forEach(opt => opt.classList.remove('selected'));
                    this.classList.add('selected');
                    selectedTheme = this.dataset.theme;
                });
            });
            
            // Start menu
            startBtn.addEventListener('click', function() {
                if (isLocked) return;
                
                startMenu.classList.toggle('active');
            });
            
            // Click outside to close start menu
            document.addEventListener('click', function(e) {
                if (!startMenu.contains(e.target) && e.target !== startBtn && startMenu.classList.contains('active')) {
                    startMenu.classList.remove('active');
                }
            });
            
            // Desktop icons
            desktopIcons.forEach(icon => {
                icon.addEventListener('click', function() {
                    if (isLocked) return;
                    openWindow(this.dataset.app);
                });
            });
            
            // Taskbar icons
            taskbarIcons.forEach(icon => {
                icon.addEventListener('click', function() {
                    if (isLocked) return;
                    
                    const app = this.dataset.app;
                    const window = document.getElementById(`${app}-window`);
                    
                    if (window.classList.contains('active')) {
                        if (window.classList.contains('minimized')) {
                            window.classList.remove('minimized');
                            window.style.zIndex = getHighestZIndex() + 1;
                        } else {
                            window.classList.add('minimized');
                        }
                    } else {
                        openWindow(app);
                    }
                });
            });
            
            // Start menu apps
            startMenuApps.forEach(app => {
                app.addEventListener('click', function() {
                    if (isLocked) return;
                    
                    if (this.dataset.app) {
                        openWindow(this.dataset.app);
                        startMenu.classList.remove('active');
                    }
                });
            });
            
            // Window controls
            windowControls.forEach(control => {
                control.addEventListener('click', function() {
                    if (isLocked) return;
                    
                    const window = this.closest('.window');
                    if (this.classList.contains('minimize')) {
                        // Store current dimensions before minimizing
                        if (!window.classList.contains('maximized')) {
                            window.style.setProperty('--prev-width', window.style.width || 'auto');
                            window.style.setProperty('--prev-height', window.style.height || 'auto');
                            window.style.setProperty('--prev-top', window.style.top || '50%');
                            window.style.setProperty('--prev-left', window.style.left || '50%');
                        }
                        
                        window.classList.add('minimized');
                        
                        // Update taskbar icons
                        const app = window.id.split('-')[0];
                        taskbarIcons.forEach(icon => {
                            if (icon.dataset.app === app) {
                                icon.classList.add('active');
                            }
                        });
                    } else if (this.classList.contains('maximize')) {
                        if (window.classList.contains('maximized')) {
                            window.classList.remove('maximized');
                            window.style.width = window.style.getPropertyValue('--prev-width') || 'auto';
                            window.style.height = window.style.getPropertyValue('--prev-height') || 'auto';
                            window.style.top = window.style.getPropertyValue('--prev-top') || '50%';
                            window.style.left = window.style.getPropertyValue('--prev-left') || '50%';
                            window.style.transform = 'translate(-50%, -50%)';
                        } else {
                            // Store current dimensions before maximizing
                            window.style.setProperty('--prev-width', window.style.width || 'auto');
                            window.style.setProperty('--prev-height', window.style.height || 'auto');
                            window.style.setProperty('--prev-top', window.style.top || '50%');
                            window.style.setProperty('--prev-left', window.style.left || '50%');
                            
                            window.classList.add('maximized');
                            window.style.width = 'calc(100% - 20px)';
                            window.style.height = 'calc(100% - 70px)';
                            window.style.top = '10px';
                            window.style.left = '10px';
                            window.style.transform = 'none';
                        }
                    } else if (this.classList.contains('close')) {
                        window.classList.remove('active');
                        
                        // Update taskbar icons
                        const app = window.id.split('-')[0];
                        taskbarIcons.forEach(icon => {
                            if (icon.dataset.app === app) {
                                icon.classList.remove('active');
                            }
                        });
                    }
                });
            });
            
            // Make windows draggable
            windows.forEach(window => {
                const header = window.querySelector('.window-header');
                let isDragging = false;
                let offsetX, offsetY;
                
                header.addEventListener('mousedown', function(e) {
                    if (isLocked || window.classList.contains('maximized')) return;
                    
                    isDragging = true;
                    offsetX = e.clientX - window.getBoundingClientRect().left;
                    offsetY = e.clientY - window.getBoundingClientRect().top;
                    
                    // Bring to front
                    window.style.zIndex = getHighestZIndex() + 1;
                });
                
                document.addEventListener('mousemove', function(e) {
                    if (!isDragging) return;
                    
                    window.style.left = `${e.clientX - offsetX}px`;
                    window.style.top = `${e.clientY - offsetY}px`;
                    window.style.transform = 'none';
                    
                    // Store position for restore
                    window.style.setProperty('--prev-width', window.style.width || 'auto');
                    window.style.setProperty('--prev-height', window.style.height || 'auto');
                    window.style.setProperty('--prev-top', window.style.top);
                    window.style.setProperty('--prev-left', window.style.left);
                });
                
                document.addEventListener('mouseup', function() {
                    isDragging = false;
                });
            });
            
            // Game functionality
            gameItems.forEach(item => {
                item.addEventListener('click', function() {
                    if (isLocked) return;
                    
                    const game = this.dataset.game;
                    if (game === 'pvz') {
                        openWindow('pvz');
                    } else if (game === 'minecraft') {
                        // Default to PC version
                        minecraftFrame.src = 'https://www.mc.js.cool/mc/1.8wasm/';
                        openWindow('minecraft');
                    }
                });
            });
            
            // Minecraft device selection
            deviceBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    if (isLocked) return;
                    
                    deviceBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    if (this.dataset.device === 'pc') {
                        minecraftFrame.src = 'https://www.mc.js.cool/mc/1.8wasm/';
                    } else {
                        minecraftFrame.src = 'https://www.mc.js.cool/mc/1.8touch/';
                    }
                });
            });
            
            // Browser functionality
            browserGoBtn.addEventListener('click', function() {
                if (isLocked) return;
                
                let url = browserUrlInput.value.trim();
                if (!url.startsWith('http://') && !url.startsWith('https://')) {
                    url = 'https://' + url;
                }
                browserIframe.src = url;
            });
            
            browserUrlInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    browserGoBtn.click();
                }
            });
            
            // Calculator buttons
            calculatorBtns.forEach(button => {
                button.addEventListener('click', () => {
                    if (isLocked) return;
                    
                    const value = button.dataset.value;
                    
                    if (value >= '0' && value <= '9') {
                        appendNumber(value);
                    } else if (value === '.') {
                        addDecimalPoint();
                    } else if (value === 'C') {
                        clearCalculator();
                    } else if (value === '+/-') {
                        toggleSign();
                    } else if (value === 'DEL') {
                        deleteNumber();
                    } else if (value === '=') {
                        compute();
                    } else {
                        chooseOperation(value);
                    }
                    
                    updateCalculatorDisplay();
                });
            });
            
            // Lock screen functionality
            lockBtn.addEventListener('click', function() {
                lockSystem();
            });
            
            lockPassword.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    unlockSystem();
                }
            });
            
            lockHint.addEventListener('click', function() {
                unlockSystem();
            });
            
            // Language switch
            languageSwitch.addEventListener('click', function() {
                selectedLanguage = selectedLanguage === 'en' ? 'zh' : 'en';
                updateTranslations(selectedLanguage);
                this.textContent = selectedLanguage === 'en' ? 'EN/中文' : '中文/EN';
            });
            
            // Power options
            restartBtn.addEventListener('click', function() {
                if (confirm('Are you sure you want to restart?')) {
                    location.reload();
                }
            });
            
            shutdownBtn.addEventListener('click', function() {
                if (confirm('Are you sure you want to shut down?')) {
                    installer.style.display = 'block';
                    desktop.style.display = 'none';
                    taskbar.style.display = 'none';
                    startMenu.style.display = 'none';
                    windows.forEach(w => w.classList.remove('active'));
                    showStep(0);
                }
            });
        });
    </script>
</body>
</html>
